<template>
    <div style="margin: 20px" />
    <el-form :label-position="labelPosition" label-width="auto" :model="userInfo"
        style="max-width: 600px; margin: 20px auto">
        <el-form-item label="姓名:">
            <el-input v-model="userInfo.name" />
        </el-form-item>
        <el-form-item label="手机:">
            <el-input v-model="userInfo.phone" />
        </el-form-item>
        <el-form-item label="地址:">
            <el-input v-model="userInfo.address" />
        </el-form-item>
        <el-form-item label="商品名称:">
            <el-input v-model="product.name" />
        </el-form-item>
        <el-form-item label="商品序列号:">
            <el-input v-model="product.sn" />
        </el-form-item>

        <el-form-item label="发票信息：">
            <el-upload v-model="product.bill" :action="'https://yangcloud.cn:8080/api/user/upload/contract?uid=' + id"
                :show-file-list="true" :auto-upload="false">
                <el-button>上传合同</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        jpg/png files with a size less than 500KB.
                    </div>
                </template>
            </el-upload>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { doGet, doPost } from "../http/httpRequest";
import userApi from "../../api/user.js"

let userInfo = ref({});

let uploadImageRef = ref({});
let uploadContractRef = ref({});

let imageFileList = ref([]);
let imageTip = ref("");
let imageUrl = ref("");

let route = useRoute();
let id = route.params.id;

onMounted(() => {
    // 根据id查询用户信息
    userApi.getUserById(id).then((res) => {
        console.log(res)
        if (res.code === 200) {
            userInfo.value = res.data;
        }
    });
});

function submitForm() {
    let formData = new FormData();
    for (let key in userInfo.value) {
        if (userInfo.value[key]) {
            formData.append(key, userInfo.value[key]);
        }
    }

    doPost("/api/user/update/info", formData).then((res) => {
        if (res.code === 200) {
            console.log("更新成功");
        } else {
            console.log("更新失败");
            return;
        }
    });

    uploadImageRef.value.submit();
    uploadContractRef.value.submit();
}

function resetForm() {
    uploadImageRef.value.clearFiles();
    uploadContractRef.value.clearFiles();
}

function imageSuccess() {
    imageFileList.value = [];
    //提示一下
    imageTip = "头像上传成功";
}

function imageError() {
    imageFileList.value = [];
    //提示一下
    imageTip = "头像上传失败";
}
</script>

<style>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>